<template>
  <div class="app-container">
    <div v-if="!isManage">
      <div class="history">
        <el-button
          v-if="~accessable.indexOf('special:goods_current')"
          :type="filters.history == 0 ? 'success' : 'info'"
          size="small"
          v-waves
          @click="now"
        >商品特价</el-button>
        <el-button
          v-if="~accessable.indexOf('special:goods_history')"
          :type="filters.history == 1 ? 'success' : 'info'"
          size="small"
          v-waves
          @click="history"
        >历史商品特价</el-button>
      </div>
      <div class="filter-container">
      <el-button class="filter-item" v-if="~accessable.indexOf('special:goods_add')" type="primary" v-waves icon="el-icon-plus" @click="handleUpdate(null)">添加特价活动</el-button>

      <el-input @keyup.enter.native="handleFilter" style="width: 200px;" class="filter-item" placeholder="特价名称" v-model="filters['like$goods.title']"></el-input>


      <el-button class="filter-item" type="primary" v-waves icon="el-icon-search" @click="handleFilter">搜索</el-button>
    </div>
    <div>
      <el-row :gutter="20">
        <el-col :span="6" v-for="item in list" :key="item.id">
          <el-card class="box-card">
            <div slot="header" class="clearfix">
              <span style="float:left">{{item.activityName}}
                <i class="goods-tag" :style="item.color|background">{{item.tagTitle}}</i>
                <!-- <i class="goods-tag" :style="item.color|background">{{item.title}}</i> -->
              </span>
              <div style="float: right;">
                <el-button v-if="~accessable.indexOf('special:goods_modify')" style=" padding: 3px 0" @click="handleUpdate(item)" type="text">修改</el-button>  
                <el-button v-if="~accessable.indexOf('special:goods_delete')" style=" padding: 3px 0" @click="handleDelete(item)" type="text">删除</el-button>
              </div>
            </div>
          
            <div class="text item">
                开始时间: {{item.startTime}}
            </div>
            <div class="text item">
                结束时间: {{item.endTime}}
            </div>
            <div class="text item">
              折扣类型: {{item.discountType|discountTypeFilter}}
            </div>
            <div class="text item" v-if="item.discountType == 2">
                折扣价格: {{item.money}}元 + {{item.points}}积分
            </div>
            <div class="text item" v-if="item.discountType == 1">
                折扣百分比: {{item.discountPercent}}%
            </div>
            <div class="text item">
                状态 : <el-tag :type="item.status|statustagFilter">{{item.status|statusFilter}}</el-tag> 
            </div>
              <div class="bottom clearfix">
          <el-button type="text" style="float:right" v-if="~accessable.indexOf('special:goods_relate_manage')"  @click="manageGoods(item.id)" class="button">商品管理</el-button>
        </div>
          </el-card>
        </el-col>
      </el-row>

    </div>
    <el-dialog :title="isEditing?'修改':'添加'" :visible.sync="dialogFormVisible" width="900px">
      <el-form class="dialog-form" :rules="rules" ref="dataForm" :model="temp" label-position="left" label-width="120px">

        <el-form-item label="活动名称" prop="activityName">
          <el-input v-model="temp.activityName" placeholder="活动名称"></el-input>
        </el-form-item>
        <!-- <el-form-item label="标签名称" prop="title">
          <el-input v-model="temp.title" placeholder="标签名称"></el-input>
        </el-form-item> -->

        <el-form-item label="标签名称" prop="tagTitle">
          <el-input v-model="temp.tagTitle" placeholder="标签名称"></el-input>
        </el-form-item>
        
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="标签颜色" prop="color">
              <div class="block">
                <el-color-picker v-model="temp.color"></el-color-picker>
              </div>
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="标签样式" prop="tagStyle">
              <el-select v-model="temp.tagStyle" placeholder="请选择">
                <el-option 
                  v-for="item in labelStyle"
                  :key="item.value" 
                  :label="item.label" 
                  :value="item.label">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <div style="margin-bottom: 10px;">
              <el-col :span="12" v-if="temp.tagStyle == 'HOT'">
                <span class="labelText">建议输入两个字</span>
                <img src="../../assets/labelIcon/hot.png" alt="" width="50px">
              </el-col>
              <el-col :span="12" v-if="temp.tagStyle == '晒图返现'">
                <span class="labelText">建议输入格式“晒图返现10”</span>
                <img src="../../assets/labelIcon/return.png" alt="" width="50px">
              </el-col>
              <el-col :span="12" v-if="temp.tagStyle == '热销'">
                <span class="labelText">建议输入四个字</span>
                <img src="../../assets/labelIcon/sellwell.png" alt="" width="50px">
              </el-col>
              <el-col :span="12" v-if="temp.tagStyle == '金卡九折'">
                <span class="labelText">图片无需输入文字</span>
                <img src="../../assets/labelIcon/goldencard.png" alt="" width="50px">
              </el-col>
              <el-col :span="12" v-if="temp.tagStyle == '新品'">
                <span class="labelText">建议输入两个字</span>
                <img src="../../assets/labelIcon/newProducts.png" alt="" width="50px">
              </el-col>
              <el-col :span="12" v-if="temp.tagStyle == '秒杀'">
                <span class="labelText">建议输入九个字</span>
                <img src="../../assets/labelIcon/Spike.png" alt="" width="50px">
              </el-col>
              <el-col :span="12" v-if="temp.tagStyle == '新品上市'">
                <span class="labelText">建议输入四个字</span>
                <img src="../../assets/labelIcon/newProductslist.png" alt="" width="50px">
              </el-col>
              <el-col :span="12" v-if="temp.tagStyle == '浦发专享'">
                  <span class="labelText">建议输入四个字</span>
                <img src="../../assets/labelIcon/pufa.png" alt="" width="50px">
              </el-col>
          </div>

        </el-row>


        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="生效时间" prop="startTime">
              <el-date-picker v-model="temp.startTime"  value-format="yyyy-MM-dd HH:mm:ss" align="right" type="datetime" placeholder="选择生效时间"
                :picker-options="pickerOptions1">
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="失效时间" prop="endTime">
              <el-date-picker v-model="temp.endTime" value-format="yyyy-MM-dd HH:mm:ss" align="right" type="datetime" placeholder="选择失效时间"
                :picker-options="pickerOptions1">
              </el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>

         <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="折扣类型" prop="discountType">
                <el-select v-model="temp.discountType" placeholder="请选择">
                  <el-option
                    v-for="item in discountOptions"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                  </el-option>
                </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">

            <el-form-item label="折扣百分比" prop="discountPercent" v-if="temp.discountType==1">

                <el-input type="number" v-model="temp.discountPercent" placeholder="比如80" style="width:100px;"></el-input>
               %
            </el-form-item>

            <el-form-item label="统一微信价格" prop="money" v-if="temp.discountType==2">

                <el-input type="number" v-model="temp.money" placeholder="请输入微信价格" style="width:100px;"></el-input>
            </el-form-item>

            <el-form-item label="统一积分价" prop="points" v-if="temp.discountType==2">

                <el-input type="number" v-model="temp.points" placeholder="请输入积分数" style="width:100px;"></el-input>
            </el-form-item>

          </el-col>
        </el-row>


        <el-form-item label="发布状态" prop="status">

          <el-radio-group v-model="temp.status">
            <el-radio v-for="(item,value) in statusFilter" :key="value" :label="value" :value="value">{{item}}</el-radio>
          </el-radio-group>
        </el-form-item>






      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取消</el-button>
        <el-button type="primary" :loading="submiting" @click="submitFormAction">确定</el-button>
      </div>
    </el-dialog>
    </div>
    
    <router-view></router-view>
  </div>

</template>

<script>
let statusFilter = ["上线", "下线"];
let statustagFilter = ["success", "danger", "info", "warning"];
let discountOptions = [
  {
    value: 1,
    label: "打折"
  },
  {
    value: 2,
    label: "统一价"
  }
];

export default {
  watch: {
    $route() {
      if (this.$route.name == "goods.special_center.manage") {
        this.isManage = true;
      } else {
        this.isManage = false;
      }
    }
  },
  created() {
    this.filters.history = 0;
    if (this.$route.name == "goods.special_center.manage") {
      this.isManage = true;
    } else {
      this.isManage = false;
    }
    this.init("goods_activity", 1).loadData();
  },
  filters: {
    statusFilter(status) {
      return statusFilter[parseInt(status)];
    },
    statustagFilter(status) {
      return statustagFilter[parseInt(status)];
    },
    discountTypeFilter(v) {
      let rt;
      discountOptions.forEach(el => {
        if (el.value == v) {
          rt = el.label;
        }
      });
      return rt;
    },
    background(color) {
      return "background:" + color; 
    }
  },
  methods: {
    submitFormAction () {
      this.$refs['dataForm'].validate(valid => {
        if (valid) {
          if (this.submiting) {
            return
          }
          this.submiting = true
          let url = null
          if (this.isEditing) {
            url = "/admin/goods_activity/save"
          } else {
            url = "/admin/goods_activity/add"
          }
          this.$post(url, this.temp).then(
            data => {
              this.submiting = false
              this.dialogFormVisible = false
              this.$notify({
                title: '成功',
                message: '操作成功',
                type: 'success',
                duration: 2000
              })
              this.loadData()
            })
            .catch(_ => {
              this.submiting = false
            })
        }
      })
    },
    history () {
      this.filters.history = 1;
      this.handleFilter();
    },
    now () {
      this.filters.history = 0;
      this.handleFilter();
    },
    // loadData () {
    //   this.$post('/admin/goods_activity/list', this.postParams).then(
    //     data => {
    //       data = data.rows
    //       this.list = data
    //     }
    //   )
    // },
    // handleFilter () {
    //   this.loadData()
    // },
    manageGoods(id) {
      this.$router.push("/goods/special/manage?id=" + id);
    }
  },

  data() {
    return {
      isManage: false,
      discountOptions,
      dialogFormVisible: false,
      labelStyle : [
        {
          value: 1,
          label: "HOT"
        },
        {
          value: 2,
          label: "晒图返现"
        },
        {
          value: 3,
          label: "热销"
        },
        {
          value: 4,
          label: "金卡九折"
        },
        {
          value: 5,
          label: "新品"
        },
        {
          value: 6,
          label: "秒杀"
        },
        {
          value: 7,
          label: "新品上市"
        },
        {
          value: 8,
          label: "浦发专享"
        },

      ],
      temp: {
        id: "",
        // title:'',
        tagStyle:'',
        tagTitle: "",
        color: "",
        startTime: "",
        discountType: "",
        activityName: "",
        money: "",
        points: 0,
        discountPercent: "",
        endTime: "",
        status
      },
      statusFilter: statusFilter,
      pickerOptions1: {
        //   disabledDate(time) {
        //     return time.getTime() > Date.now();
        //   },
        shortcuts: [
          {
            text: "今天",
            onClick(picker) {
              picker.$emit("pick", new Date());
            }
          },
          {
            text: "昨天",
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24);
              picker.$emit("pick", date);
            }
          },
          {
            text: "一周前",
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", date);
            }
          }
        ]
      },
      rules: {
        title: [
          {
            required: true,
            message: "标签名称不能为空",
            trigger: "change"
          },
          {
            max: 50,
            message: "标签名称不能大于50个字",
            trigger: "change"
          }
        ],
        tagTitle: [
          {
            required: true,
            message: "标签名称不能为空",
            trigger: "change"
          }
        ],
        color: [
          {
            required: true,
            message: "标题颜色必须指定",
            trigger: "change"
          }
        ],
        // tagStyle: [
        //   {
        //     required: true,
        //     message: "标题样式必须选择",
        //     trigger: "change"
        //   }
        // ],
        activityName: [
          {
            required: true,
            message: "特价活动名称不能为空",
            trigger: "change"
          },
          {
            max: 50,
            message: "特价活动名称不能大于50个字",
            trigger: "change"
          }
        ],

        startTime: [
          {
            required: true,
            message: "生效时间不能为空",
            trigger: "change"
          }
        ],

        endTime: [
          {
            required: true,
            message: "失效时间不能为空",
            trigger: "change"
          }
        ],
        discountType: [
          {
            required: true,
            message: "折扣类型必须指定",
            trigger: "change"
          }
        ],

        discountPercent: [
          {
            required: true,
            message: "折扣比例必须指定",
            trigger: "change"
          }
        ],
        money: [
          {
            required: true,
            message: "统一价必须指定",
            trigger: "change"
          }
        ],
        points: [
          {
            required: true,
            message: "统一积分必须指定",
            trigger: "change"
          }
        ],

        status: [
          {
            required: true,
            message: "请选中发布状态",
            trigger: "change"
          }
        ]
      }
    };
  }
};
</script>

<style lang="scss" scoped>
  .labelText{
    display: block;
    color: #f56c6c;
    font-size: 14px;
    margin-bottom: 20px;
  }
.item {
  line-height: 2.5em;
}
.box-card {
  margin-bottom: 20px;
}

.goods-tag {
  font-size: 14px;
  font-style: normal;
  padding: 1px 3px;
  color: #fff;
}
.history {
  margin-bottom: 10px;
}
</style>
